<!DOCTYPE html>
<html>
<head>
    <title>Browser Command Test Page</title>
    <style>
        body { 
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 40px auto;
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
        }
        input {
            padding: 8px;
            margin: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Test Page for Browser Commands</h1>
    
    <div id="buttons">
        <button id="btn1">Button 1</button>
        <button id="btn2">Button 2</button>
        <button id="btn3">Button 3</button>
    </div>

    <div id="forms">
        <input type="text" id="textInput" placeholder="Type something here">
        <button onclick="showInput()">Show Input</button>
    </div>

    <div id="output"></div>

    <script>
        function showInput() {
            const input = document.getElementById('textInput').value;
            document.getElementById('output').textContent = 'You typed: ' + input;
        }

        // Add click handlers to all buttons to show they were clicked
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', () => {
                console.log(`${button.textContent} was clicked!`);
                document.getElementById('output').textContent = `${button.textContent} was clicked!`;
            });
        });
    </script>
</body>
</html> 